<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表数据</title>
	</head>
	<body>
		<div id="app">
			用户编号: <input type="text" disabled="ture" v-model="user2.id"/>
			用户姓名: <input type="text" v-model="user2.name"/><br>
			用户年龄: <input type="text" v-model="user2.age"/>
			用户性别: <input type="text" v-model="user2.sex"/>
			<button @click="updateUser">更新</button>
			
			
			<hr>
			<table id="userTable" border="1px" align="center" width="800px">
				<tr align="center">
					<td colspan="5"><h3>用户列表</h3></td>
				</tr>
				<tr align="center">
					<td>ID</td>
					<td>名称</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updateBtn(user)">修改</button>
						<button @click="deleteBtn(user)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<!-- 1.引入页面JS -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		
		<!-- 2.编辑自己的JS -->
		
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					//1.定义用户列表数据
					userList:[],
					//2.定义用户属性
					user2:{
						id:'',
						name:'',
						age:'',
						sex:''
					}
				},
				methods:{
					async getUserList(){
						const{data:result} = await axios.get("http://localhost:8090/axiosUser/findAll")
						this.userList = result
						// console.log(this.userList)
					},
					updateBtn(user){
						//将用户传递的user对象赋值给data中的user2
						this.user2 = user
					},
					//更新用户信息
					async updateUser(){
						//请求类型PUT/POST   GET/DELETE
						//"http://localhost:8090/axiosUser/updateUser"
						await axios.put("http://localhost:8090/axiosUser/updateUser",this.user2)
					},
					async deleteBtn(user){
						let chaoji = user.id
						await axios.delete("http://localhost:8090/axiosUser/deleteUser",{
							params:{
								id2:chaoji
							}
						})
						//删除之后，需要将页面重新刷新
						this.getUserList()
					}
				},
				mounted() {
					//当页面渲染成功之后调用
					this.getUserList()
				}
			})
			
			
		</script>
	</body>
</html>
